<!doctype html>
<html lang="en" class="fixed">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>渠道管理</title>
    <link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png">
    <link rel="icon" type="image/png" sizes="192x192" href="favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
    <link rel="stylesheet" type="text/css"
          href="<?php xcho(loadSource('/assets/plugins/bootstrap/css/bootstrap.min.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/plugins/animate.css/animate.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/plugins/font-awesome/css/font-awesome.css')) ?>">
    <link rel="stylesheet"
          href="<?php xcho(loadSource('/assets/plugins/data-table/media/css/dataTables.bootstrap.min.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/plugins/ztree/css/zTreeStyle/zTreeStyle.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/app/css/style.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/app/css/app.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/css/new_main.css')) ?>">
    <style>
        .pagination{
            margin: 0;
        }
    </style>
</head>

<body><?php include_once TPL_PATH . 'public/nav.phtml'; ?>

<div class="wrap">
    <div class="page-body" style="padding: 0">
        <div class="content" style="margin: 0;background: #ececec">
            <div class="top_btn">
                <button class="btn btn-wide btn-primary"  id="addParent">添加</button>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="panel">
                        <div class="panel-header">
                            <span>分组 </span>
                        </div>
                        <div class="panel-content">
<!--                            <input type="text" class="form-control" id="placeholder" placeholder="请输入内容">-->
                            <ul class="ztree" id="treeDemo"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" class="scroll-to-top"><i class="fa fa-angle-double-up"></i></a>
    </div>
</div>
<div id="modalbox"></div>
<div class="modal fade" id="info-modal-group" tabindex="-1" role="dialog" aria-labelledby="modal-info-label">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header state modal-info">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modal-info-label"><i class="fa fa-info"></i></h4>
            </div>
            <div class="modal-body" style="min-height: 150px;">
                <ul class="ztree" id="group"></ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="sureGroup" data-dismiss="modal">确定</button>
                <button type="button" class="btn btn-default" id="returnGroup" data-dismiss="modal">返回</button>
            </div>
        </div>
    </div>
</div>
<input type="hidden" name="list" value="<?php xcho($index) ?>"/>
<input type="hidden" name="del_group_info" value="<?php xcho($delGroupInfo) ?>"/>
<input type="hidden" name="save_group_info" value="<?php xcho($saveGroupInfo) ?>"/>
<input type="hidden" name="groupDetail" value="<?php xcho($groupDetail) ?>"/>
<script src="<?php xcho(loadSource('/assets/plugins/jquery/jquery.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/bootstrap/js/bootstrap.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/data-table/media/js/jquery.dataTables.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/data-table/media/js/dataTables.bootstrap.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/layer-v3.0.3/layer/layer.js')) ?>"></script>
<script
    src="<?php xcho(loadSource('/assets/plugins/data-table/extensions/Responsive/js/dataTables.responsive.min.js')) ?>"></script>
<script
    src="<?php xcho(loadSource('/assets/plugins/data-table/extensions/Responsive/js/responsive.bootstrap.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets//plugins/ztree/js/jquery.ztree.core.js')) ?>"></script>
<script type="text/javascript" src="<?php xcho(loadSource('/assets//plugins/ztree/js/jquery.ztree.excheck.js')) ?>"></script>
<script type="text/javascript" src="<?php xcho(loadSource('/assets//plugins/ztree/js/jquery.ztree.exedit.js')) ?>"></script>
<script>
    $(function () {
        "use strict";
        var setting = {
            view: {
                selectedMulti: false,
                addHoverDom: addHoverDom,
                removeHoverDom:removeHoverDom
            },
            edit: {
                enable: true
            },
            data: {
                keep: {
                    parent:true,
                    leaf:true
                },
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeDrag: beforeDrag,
                beforeRemove: beforeRemove,
//                beforeRename: beforeRename,
                onRemove: onRemove
            }
        };
        var settingGroup = {
            view: {
                selectedMulti: false
            },
            edit: {
                enable: false
            },
            data: {
                keep: {
                    parent:true,
                    leaf:true
                },
                simpleData: {
                    enable: true
                }
            }
        };
        var zNodes = getListData();
        $.each(zNodes,function(i,item){
            item.isParent = true;
        })
        var log, className = "dark";
        function beforeDrag(treeId, treeNodes) {
            return false;
        }

        function beforeRemove(treeId, treeNode) {
            className = (className === "dark" ? "":"dark");
            console.log("[ beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.selectNode(treeNode);
            return confirm("确认删除 " + treeNode.name + " 吗？");
        }
        var IDMark_Switch = "_switch",
            IDMark_Icon = "_ico",
            IDMark_Span = "_span",
            IDMark_Input = "_input",
            IDMark_Check = "_check",
            IDMark_Edit = "_edit",
            IDMark_Remove = "_remove",
            IDMark_Ul = "_ul",
            IDMark_A = "_a";
        function addHoverDom(treeId, treeNode) {
            if (treeNode.parentNode && treeNode.parentNode.id!=1) return;
            var aObj = $("#" + treeNode.tId + IDMark_A);
            if ($("#diyBtn_"+treeNode.id).length>0) return;
            var editStr = "<a id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'>编辑</a>";
            aObj.append(editStr);
            var btn = $("#diyBtn_"+treeNode.id);
            if (btn) btn.bind("click", function(){
                editNode(treeNode)
            });

        }
        function removeHoverDom(treeId, treeNode) {
            $("#diyBtn_"+treeNode.id).unbind().remove();
            $("#diyBtn_space_" +treeNode.id).unbind().remove();
        };
        function onRemove(e, treeId, treeNode) {
            console.log("onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.id);
            $.ajax({
                url: $("input[name='del_group_info']").val(),
                data:{
                    id:treeNode.id
                },
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    console.log(data)
                    if(data.success == 1){
                        layer.alert("删除成功!")
                    }else{
                        alert(data.msg);
                    }
                },
                complete:function(){
                    location.reload();
                },
                error: function () {

                }
            });
        }
        function beforeRename(treeId, treeNode, newName) {
//            if (newName.length == 0) {
//                alert("节点名称不能为空.");
//                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//                setTimeout(function(){zTree.editName(treeNode)}, 10);
//                return false;
//            }
            editNode(treeNode);
            return true;
        }

        var newCount = 1;
        function add(e) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                isParent = e.data.isParent,
                nodes = zTree.getSelectedNodes(),
                treeNode = nodes[0];
            if (treeNode) {
                treeNode = zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, isParent:isParent, name:"new node" + (newCount++)});
            } else {
                treeNode = zTree.addNodes(null, {id:(100 + newCount), pId:0, isParent:isParent, name:"new node" + (newCount++)});
            }
            if (treeNode) {
                zTree.editName(treeNode[0]);
            } else {
                layer.alert("叶子节点被锁定，无法增加子节点");
            }
        };
        function edit() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = zTree.getSelectedNodes(),
                treeNode = nodes[0];
            if (nodes.length == 0) {
                layer.alert("请先选择一个节点");
                return;
            }
            zTree.editName(treeNode);
        };
        function remove(e) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = zTree.getSelectedNodes(),
                treeNode = nodes[0];
            if (nodes.length == 0) {
                layer.alert("请先选择一个节点");
                return;
            }
            var callbackFlag = $("#callbackTrigger").attr("checked");
            zTree.removeNode(treeNode, callbackFlag);
        };
        function setEdit() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                remove = $("#remove").attr("checked"),
                removeTitle = $.trim($("#removeTitle").get(0).value);
            zTree.setting.edit.showRemoveBtn = remove;
//            zTree.setting.edit.showRenameBtn = rename;
            zTree.setting.edit.removeTitle = removeTitle;
//            zTree.setting.edit.renameTitle = renameTitle;
        }
        function clearChildren(e) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = zTree.getSelectedNodes(),
                treeNode = nodes[0];
            if (nodes.length == 0 || !nodes[0].isParent) {
                alert("请先选择一个父节点");
                return;
            }
            zTree.removeChildNodes(treeNode);
        };
        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            $.fn.zTree.init($("#group"), settingGroup, zNodes);
            $("#addParent").bind("click", {isParent:true}, addNode);
            $("#edit").bind("click", edit);
            $("#remove").bind("click", remove);
            $("#clearChildren").bind("click", clearChildren);
            $("#remove").bind("change", setEdit);
            $("#rename").bind("change", setEdit);
            $("#removeTitle").bind("propertychange", setEdit)
                .bind("input", setEdit);
            $("#renameTitle").bind("propertychange", setEdit)
                .bind("input", setEdit);
            setEdit();

        });
        function addNode(e){
            var modal = '<div class="modal fade" id="info-modal2" tabindex="-1" role="dialog" aria-labelledby="modal-info-label">' +
                '<div class="modal-dialog" role="document">' +
                '<div class="modal-content">' +
                '<div class="modal-header state modal-info">' +
                '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
                '<h4 class="modal-title" id="modal-info-label"><i class="fa fa-info"></i></h4>' +
                '</div>' +
                '<div class="modal-body" style="min-height: 250px;">' +
                '<div class="col-md-12"><form class="form-horizontal form-stripe">' +
                '<div class="form-group">' +
                '<label for="hex-colorpicker" class="col-sm-2 control-label">分组名称:</label>' +
                '<div class="col-sm-10">' +
                '<input type="text" class="form-control" id="cn_name" value="">' +
                '</div>' +
                '</div>' +
                '<div class="form-group">' +
                '<label for="rgba-colorpicker" class="col-sm-2 control-label">上级分组:</label>' +
                '<div class="col-sm-10">' +
                '<input type="text" class="form-control" id="group-picker" value="">' +
                '</div>' +
                '</div>' +
                '<div class="form-group">' +
                '<label class="col-sm-2 control-label">身份：</label>' +
                '<div class="col-sm-10">' +
                '<div id="component-colorpicker" class="input-group colorpicker-component">' +
                '<select name="level_select" id="select2-example-basic" class="form-control select2-hidden-accessible" style="width: 100%" tabindex="-1" aria-hidden="true">' +
                '<option value="" label="无">无</option>' +
                '<option value="tmk" label="TMK">TMK</option>' +
                '<option value="cc" label="CC">CC</option>' +
                '<option value="jiaowu" label="教务">教务</option>' +
                '<option value="jiaoyan" label="教研">教研</option>' +
                '<option value="finance" label="财务">财务</option>'+
                '<option value="market" label="市场">市场</option>' +
                '<option value="it" label="IT">IT</option>' +
                '<option value="cr" label="CR">CR</option>' +
                '</select>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</form>' +
                '</div>'+
                '</div>' +
                '<div class="modal-footer">' +
                '<button type="button" class="btn btn-info" id="save2" data-dismiss="modal">保存</button>' +
                '<button type="button" class="btn btn-default" id="return2" data-dismiss="modal">返回</button>' +
                '</div></div></div>' +
                '</div>';
            $("#modalbox").html("").html(modal);
            $('#info-modal2').modal({
                keyboard: false,
                backdrop:false
            });
            $('#info-modal2').on('shown.bs.modal', function (e) {
                // 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零
                $(this).css('display', 'block');
                var modalHeight=$(window).height() / 2 - $('#info-modal2 .modal-dialog').height() / 2;
                $(this).find('.modal-dialog').css({
                    'margin-top': modalHeight
                });
            });
            $("#group-picker").focus(function(){
                $('#info-modal-group').modal({
                    keyboard: false,
                    backdrop:false
                });
                $('#info-modal-group').on('shown.bs.modal', function (e) {
                    // 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零
                    $(this).css('display', 'block');
                    $(this).find('.modal-dialog').css({
                        'margin-top': "100px"
                    });
                });
            });
            $("#save2").on("click",function(){
                $.ajax({
                    url: $("input[name='save_group_info']").val(),
                    data:{
                        cn_name:$("#cn_name").val(),
                        parent_id:$("#group-picker").attr("data-tid"),
                        duty:$("#select2-example-basic").val(),
                        sort:9
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        if(data.success == 1){
                            layer.alert("添加成功!",function(){
                                location.reload();
                            })
                        }else{
                            layer.alert(data.msg,function(){
                                location.reload();
                            });
                        }
                    },
                    complete:function(){

                    },
                    error: function () {

                    }
                });
            })
        }
        $("#sureGroup").on("click",function(){
            var zTree = $.fn.zTree.getZTreeObj("group"),
                nodes = zTree.getSelectedNodes(),
                treeNode = nodes[0];
            console.log(treeNode);
            if (nodes.length == 0) {
                alert("请先选择一个节点");
                return;
            }
            $("#group-picker").val(treeNode.name).attr("data-tid",treeNode.id);
        })
        function getListData(){
            var data_list ;
            $.ajax({
                url: $("input[name='list']").val(),
                type: 'post',
                async:false,
                dataType: 'json',
                success: function (data) {
                    console.log(data)
                    if(data.success == 1){
                        data_list = data.data_list;
                    }else{
                    }
                },
                complete:function(){
                },
                error: function () {

                }
            });
            return data_list;
        }
        function editNode(e){

            var modal = '<div class="modal fade" id="info-modal2" tabindex="-1" role="dialog" aria-labelledby="modal-info-label">' +
                '<div class="modal-dialog" role="document">' +
                '<div class="modal-content">' +
                '<div class="modal-header state modal-info">' +
                '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
                '<h4 class="modal-title" id="modal-info-label"><i class="fa fa-info"></i></h4>' +
                '</div>' +
                '<div class="modal-body" style="min-height: 250px;">' +
                '<div class="col-md-12"><form class="form-horizontal form-stripe">' +
                '<div class="form-group">' +
                '<label for="hex-colorpicker" class="col-sm-2 control-label">分组名称:</label>' +
                '<div class="col-sm-10">' +
                '<input type="text" class="form-control" id="cn_name" value="">' +
                '</div>' +
                '</div>' +
                '<div class="form-group">' +
                '<label for="rgba-colorpicker" class="col-sm-2 control-label">上级分组:</label>' +
                '<div class="col-sm-10">' +
                '<input type="text" class="form-control" id="group-picker" value="">' +
                '</div>' +
                '</div>' +
                '<div class="form-group">' +
                '<label class="col-sm-2 control-label">身份：</label>' +
                '<div class="col-sm-10">' +
                '<div id="component-colorpicker" class="input-group colorpicker-component">' +
                '<select name="level_select" id="select2-example-basic" class="form-control select2-hidden-accessible" style="width: 100%" tabindex="-1" aria-hidden="true">' +
                '<option value="" label="无">无</option>' +
                '<option value="tmk" label="TMK">TMK</option>' +
                '<option value="cc" label="CC">CC</option>' +
                '<option value="jiaowu" label="教务">教务</option>' +
                '<option value="jiaoyan" label="教研">教研</option>' +
                '<option value="finance" label="财务">财务</option>'+
                '<option value="market" label="市场">市场</option>' +
                '<option value="it" label="IT">IT</option>' +
                '<option value="cr" label="CR">CR</option>' +
                '</select>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</form>' +
                '</div>'+
                '</div>' +
                '<div class="modal-footer">' +
                '<button type="button" class="btn btn-info" id="save2" data-dismiss="modal">保存</button>' +
                '<button type="button" class="btn btn-default" id="return2" data-dismiss="modal">返回</button>' +
                '</div></div></div>' +
                '</div>';
            $("#modalbox").html("").html(modal);
            $('#info-modal2').modal({
                keyboard: false,
                backdrop:false
            });
            $('#info-modal2').on('shown.bs.modal', function (e) {
                // 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零
                $(this).css('display', 'block');
                $(this).find('.modal-dialog').css({
                    'margin-top': "100px"
                });
            });
            $("#group-picker").focus(function(){
                $('#info-modal-group').modal({
                    keyboard: false,
                    backdrop:false
                });
                $('#info-modal-group').on('shown.bs.modal', function (e) {
                    // 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零
                    $(this).css('display', 'block');
                    $(this).find('.modal-dialog').css({
                        'margin-top': "100px"
                    });
                });
            });

            $("#save2").on("click",function(){
                $.ajax({
                    url: $("input[name='save_group_info']").val(),
                    data:{
                        id: e.id,
                        cn_name:$("#cn_name").val(),
                        parent_id:$("#group-picker").attr("data-tid"),
                        duty:$("#select2-example-basic").val(),
                        sort:9
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        if(data.success == 1){
                            alert("编辑成功!")
                        }else{
                            alert(data.msg);
                        }
                    },
                    complete:function(){
                        location.reload();
                    },
                    error: function () {

                    }
                });
            })
        }
    });
</script>
<?php include_once TPL_PATH . 'public/foot_script.phtml'; ?>

<button id="top" style="height: 50px;width: 50px;"></button></body>

</html>
